<template>
  <div v-drag>
    <div class="mask"  @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>添加电话用户</p>
        <i  @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>备注：</span>
          <div :class="{'error_border':tip_num===1}">
            <el-input type="text" placeholder="请备注用户姓名与电话" v-model.trim="remark" @input="tips='',tip_num=''"></el-input>
          </div>
        </div>

        <p class="error_line">{{ tips }}</p>

      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirm">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {addPhoneUser} from "@/api/data/user/";

export default {
  data(){
    return {
      loading:false,
      remark:'',
      tip_num:'',
      tips:'',
    }
  },
  mounted() {

  },
  methods:{

    //确定
    confirm() {
        if(this.remark === '') {
          this.tip_num = 1;
          this.tips = '请填写备注信息';
        }
        else {
          this.tip_num = '';
          this.tips = '';
          this.sendInfo();
        }
    },
    sendInfo() {
      let queryParams = {
         remark:this.remark
      };
      addPhoneUser(queryParams).then(res=> {
        this.closePopup(true);
        this.$message.success({
          message:'添加成功！',
          duration:1500
        });
      }).catch((e)=> {
        this.loading = false;
      })
    },
    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
 .avatar {
   width: 70px;
   height: 70px;
   border-radius: 8px;
   overflow: hidden;
 }
 .money {
   color: #f7ab20
 }
 .time {
   color:#e40000
 }
 .flex_center {
   width:100%;
   text-align: center;
   height:50px;
   line-height: 50px;
   color:red;
 }
</style>
